<!-- 浮球 -->
<template>
	<view class="vk-data-float-ball" v-if="complete">
		<!-- 回到顶部 -->
		<u-back-top
			:show-back-top="showBackTop"
			:scroll-top="scrollTop"
			:icon-style="{
				fontSize: '16px',
				color: '#ffffff'
			}"
			:custom-style="{
				backgroundColor: 'rgba(0, 0, 0, 0.6)'
			}"
			:bottom="bottom"
			@top="backToTop"
		></u-back-top>
		<!-- 返回按钮 -->
		<view
			class="ball-btn left-btn"
			@click="pageBack"
			v-if="data.showBack"
			:style="pageBackStyleCom"
		>
			<u-icon name="arrow-left" color="#FFFFFF" size="38"></u-icon>
		</view>

		<view
			class="ball-btn right-btn"
			@click="customEvent(item)"
			v-for="(item, index) in rightBtnsCom"
			:key="index"
			:style="{
				bottom: bottom + (index+1) * 50 + 'px',
				zIndex: zIndex
			}"
		>
			<!-- 联系客服 -->
			<u-button
				v-if="item === 'contact'"
				hover-class="none"
				shape="circle"
				size="mini"
				open-type="contact"
				:plain="true"
				:hair-line="false"
				:custom-style="{
					border: 0,
					width: '40px',
					height: '40px',
					backgroundColor: 'rgba(0, 0, 0, 0)'
				}"
			>
				<u-icon name="server-man" color="#FFFFFF" size="38"></u-icon>
			</u-button>
			<!-- #ifdef MP-WEIXIN -->
			<!-- 打开App -->
			<u-button
				v-if="item === 'launchApp'"
				hover-class="none"
				shape="circle"
				size="mini"
				open-type="launchApp"
				:plain="true"
				:hair-line="false"
				:custom-style="{
					border: 0,
					width: '40px',
					height: '40px',
					backgroundColor: 'rgba(0, 0, 0, 0)'
				}"
			>
				<u-icon name="vk-icon-APPku" color="#FFFFFF" size="38"></u-icon>
			</u-button>
			<!-- 打开App -->
			<u-button
				v-if="item === 'backMP'"
				hover-class="none"
				shape="circle"
				size="mini"
				:plain="true"
				:hair-line="false"
				:custom-style="{
					border: 0,
					width: '40px',
					height: '40px',
					backgroundColor: 'rgba(0, 0, 0, 0)'
				}"
				@click="navigateBackMiniProgram"
			>
				<text class="text-btn">返回</text>
			</u-button>
			<!-- #endif -->
			<!-- 登录 -->
			<view v-else-if="item === 'login'">登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "vk-data-float-ball",
		emits: ["top"],
		props: {
			scrollTop: {
				type: Number,
				default () {
					return 0;
				}
			},
			// 左侧按钮 (暂不支持)
			leftBtns: {
				type: Array,
				default () {
					return [];
				}
			},
			// 右侧按钮,暂只支持联系客服
			rightBtns: {
				type: Array,
				default () {
					return [];
				}
			},
			// 强制显示返回按钮
			showBack: {
				type: Boolean
			},
			custom: {
				type: Array,
				default () {
					return [];
				}
			},
			zIndex: {
				type: [Number],
				default: 900
			},
			bottom: {
				type: Number,
				default: 140
			},
			backPosition: {
				type: String,
				default: ''
			},
			// 如果此值为true，这强制显示返回顶部按钮，不根据scrollTop的值，如果为false，根据scrollTop的值判断是否显示
			showBackTop: {
				type: Boolean,
				default: false
			}
		},
		data: function() {
			// 组件创建时，进行数据初始化
			return {
				data: {
					showBack: false,
					safeTop: 0,
					backPosition: 'bottom'
				},
				complete: false
			};
		},
		//组件创建时，进行数据初始化
		created: function() {
			if (this.backPosition) this.data.backPosition = this.backPosition;
			let currentPages = getCurrentPages();
			if (currentPages && currentPages.length > 1) {
				// #ifdef WEB
				this.data.showBack = true;
				if (!this.backPosition) this.data.backPosition = "bottom";
				// #endif
				// #ifndef WEB
				if (this.showBack) {
					this.data.showBack = true;
					if (!this.backPosition) this.data.backPosition = "top";
				}
				// #endif
			} else {
				this.data.showBack = false;
			}
		},
		mounted: function() {
			// #ifdef MP-WEIXIN
			const windowInfo = uni.getWindowInfo();
			this.data.safeTop = windowInfo.safeAreaInsets.top;
			// #endif
			// #ifndef MP-WEIXIN
			uni.getSystemInfo({
				success: (res) => {
					this.data.safeTop = res.safeArea.top;
				}
			});
			// #endif
			setTimeout(() => {
				this.complete = true;
			}, 100);
		},
		methods: {
			// 返回
			pageBack() {
				let currentPages = getCurrentPages();
				if (currentPages && currentPages.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			customEvent(name) {
				let vk = uni.vk;
				let { custom = [] } = this;
				if (name === "login") {
					if (custom.indexOf(name) === -1) {
						vk.navigateToLogin();
					}
				}
				this.$emit(name);
			},
			backToTop() {
				this.$emit('top');
			},
			navigateBackMiniProgram() {
				uni.navigateBackMiniProgram({
					fail: (err) => {
						console.log("navigateBackMiniProgramErr: ", err);
					}
				});
			}
		},
		watch: {
			backPosition(val) {
				this.data.backPosition = val;
			}
		},
		computed: {
			rightBtnsCom() {
				let arr = [];
				let { rightBtns = [] } = this;
				rightBtns.map((item, index) => {
					if (["contact", "backMP", "launchApp"].indexOf(item) > -1) {
						// #ifdef MP-WEIXIN
						arr.push(item);
						// #endif
					} else {
						arr.push(item);
					}
				});
				return arr;
			},
			pageBackStyleCom() {
				if (this.data.backPosition === "bottom") {
					return {
						bottom: this.bottom + this.leftBtns.length * 50 + 'px',
						zIndex: this.zIndex
					}
				} else {
					let top = this.data.safeTop;
					// #ifdef WEB
					top += 15;
					// #endif
					return {
						top: top + 'px',
						zIndex: this.zIndex
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.vk-data-float-ball {
		.ball-btn {
			width: 40px;
			height: 40px;
			position: fixed;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, 0.6);
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			z-index: 900;
		}

		.text-btn {
			color: #ffffff;
			letter-spacing: 2px;
		}

		.left-btn {
			left: 20px;
		}

		.right-btn {
			right: 20px;
		}
	}
</style>
